@use "grid-variables";

// spacings around target block
@each $prop, $abbrev in (margin: m, padding: p) {
  @each $level, $spacer in grid-variables.$spacers {
    .#{$abbrev}a-#{$level},
    .#{$abbrev}y-#{$level},
    .#{$abbrev}t-#{$level} {
      #{$prop}-top: $spacer !important;
    }

    .#{$abbrev}a-#{$level},
    .#{$abbrev}y-#{$level},
    .#{$abbrev}b-#{$level} {
      #{$prop}-bottom: $spacer !important;
    }

    .#{$abbrev}a-#{$level},
    .#{$abbrev}x-#{$level},
    .#{$abbrev}r-#{$level} {
      #{$prop}-right: $spacer !important;
    }

    .#{$abbrev}a-#{$level},
    .#{$abbrev}x-#{$level},
    .#{$abbrev}l-#{$level} {
      #{$prop}-left: $spacer !important;
    }
  }

  .#{$abbrev}t-auto,
  .#{$abbrev}y-auto,
  .#{$abbrev}a-auto {
    #{$prop}-top: auto !important;
  }

  .#{$abbrev}r-auto,
  .#{$abbrev}x-auto,
  .#{$abbrev}a-auto {
    #{$prop}-right: auto !important;
  }

  .#{$abbrev}b-auto,
  .#{$abbrev}y-auto,
  .#{$abbrev}a-auto {
    #{$prop}-bottom: auto !important;
  }

  .#{$abbrev}l-auto,
  .#{$abbrev}x-auto,
  .#{$abbrev}a-auto {
    #{$prop}-left: auto !important;
  }
}

// spacings between items in the block
@each $prop, $direction in (x: right, y: bottom) {
  @each $level, $spacer in grid-variables.$spacers {
    .va-spacing-#{$prop}-#{$level} {
      & > * {
        margin-#{$direction}: $spacer;

        &:last-child {
          margin-#{$direction}: 0;
        }
      }
    }
  }
}
